<template>
    <div class="index-chart" style="width: 100%;">
        <el-card>
            <template #header>
                <div class="card-header flex justify-between">
                    <span>订单统计</span>
                    <div>
                        <el-check-tag class="ml-2" v-for="(item, index) in tagList" :key="index"
                            @click="handleClick(item.value)" :checked="currentChecked === item.value">
                            {{ item.text }}
                        </el-check-tag>
                    </div>
                </div>
            </template>
            <div ref="el" id="chart" style="width: 100%; height: 300px;"></div>
        </el-card>
    </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { onBeforeMount, onMounted, ref } from 'vue';
import { staticThree } from '../api/static';
import { useResizeObserver } from '@vueuse/core'
const currentChecked = ref('week');
const el = ref(null);
let myChart = null;
/**定义初始选项数据 */
const tagList = ref([
    {
        text: '近1个月',
        value: 'month'
    }, {
        text: '近1周',
        value: 'week'
    }, {
        text: '24小时',
        value: 'hour'
    }
]);
/** 选中事件 */
const handleClick = (event) => {
    console.log('选择了', event);
    currentChecked.value = event;
    getChartData();
}

/** 获取图标数据 */
let getChartData = () => {
    let option = {
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [],
                type: 'bar'
            }
        ]
    };

     myChart.showLoading();
    /** 调用获取数据接口 */
    staticThree(currentChecked.value).then(({ x, y }) => {
        option.xAxis.data = x;
        option.series[0].data = y;
        myChart.setOption(option);

    }).finally(() => {
        myChart.hideLoading();
    })
}
/** 页面尺寸改变 1、通过vueUse的useResizeObserver方法去监听el标签的大小改变/2、通过myChart.resiz()方法去适配echarts页面改变。 */
useResizeObserver(el, (event) => {
    myChart && myChart.resize();

})
onMounted(() => {
    let chart = document.getElementById('chart');
    if(chart){
        myChart = echarts.init(chart);
    }
    myChart && getChartData();
});
onBeforeMount(() => {
    if (myChart) {
        myChart.dispose();
    }
});
</script>
<style scoped lang='scss'></style>